<template>

	<view class="content">
<scroll-view >
		<u-modal v-model="query_name_show" :content="query_content" :mask-close-able="true" show-cancel-button='true' @cancel="gotohome"
		 @confirm='playad'></u-modal>
		<view class="check_data" v-if='check_da'>

			<view class="whole" v-if="f_bd">

				<text class="whole-text">全国有{{f_National}}个{{query_name}}</text>

				<view style="width: 90%;margin-top: 50rpx;">
					<uni-list>

						<uni-list-item v-for=" i in fn_data">

							<view class="whole-data">{{i.name}}&nbsp&nbsp&nbsp{{i.num}}
								<view class="whole-line">
									<u-line-progress :show-percent="false" active-color="#98C1FF" :percent="i.num" height="18"></u-line-progress>
								</view>
							</view>
						</uni-list-item>



					</uni-list>
					<view class="whole-Third-party">
						<text>第三方数据提供</text>
					</view>
				</view>



			</view>
			<!-- 男女比例分布 -->
			<view class="included">在同样的TA&nbsp&nbsp我们收录了</view>
			<view class="included" style="margin-top: 30rpx;margin-bottom: 60rpx;" >
				{{f_series[0].data+f_series[1].data}}个{{query_name}}
			</view>
			<view class="f-charts-box" v-if='data_show'>
				<view>
					<text class="proportion-sex-text">男女比例</text>

					<view class="qiun-charts">
						<canvas canvas-id="f_canvasPie" id="f_canvasPie" class="charts"></canvas>
					</view>

					<view class="bili">
						<view class="bili-man">
							男:&nbsp&nbsp{{f_series[0].data}}
						</view>
						<view class="bili-woman">
							女:&nbsp&nbsp{{f_series[1].data}}
						</view>

					</view>
					<!-- 分割线 -->
					<view class="dividingLine"></view>
				</view>
				<!-- 年龄段分布 -->
				<view class="ageDistribution">
					<text class="age-text">年龄段分布</text>
					<view class="qiun-columns">
						<view class="qiun-charts">
							<canvas canvas-id="f_canvasColumn" id="f_canvasColumn" class="charts" ref="column"></canvas>
						</view>
					</view>
					<view class="dividingLine" style="margin-top: 15%;"></view>
				</view>

				<!-- 地区分布 -->
				<view class="qiun-columns">
					<text class="columns-text">地区分布</text>
					<view class="qiun-charts" style="position: relative;bottom: 40rpx;">
						<canvas canvas-id="f_canvasLineA" id="f_canvasLineA" class="charts"></canvas>
					</view>
				</view>
			</view>
			<!-- 未查询到数据显示出该页面 -->
		<view class="no—data"  v-if='no_data_show'>
			<image src="../../static/no_data.png" mode="" class="no-data-img"></image>
			<view class="share">
				<button type="default" plain="true"  open-type="share" class="share-btn" >
					分享
				</button>
		
			</view>
		</view>

		</view>
</scroll-view >
	</view>
</template>

<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaPie = null;
	var canvaColumn = null;
	var canvaLineA = null;
	export default {
		data() {
			return {
				data_show: false,
				no_data_show: false,
				query_name: '',
				province_data: '',
				query_name_show: false,
				fn_data: [],
				f_series: {

				},

				f_Column: {
					"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
					"series": [{
						"name": "成交量1",
						"data": [15, {
							"value": 20,
							"color": "#f04864"
						}, 45, 37, 43, 34]
					}, {
						"name": "成交量2",
						"data": [30, {
							"value": 40,
							"color": "#facc14"
						}, 25, 14, 34, 18]
					}]
				},
				f_LineA: {

				},
				f_National: 0,
				cHeight: uni.upx2px(650),
				cHeight: uni.upx2px(500),
				f_name: '',
				query_content: '观看广告，查询同样的TA',
				f_bd: false,
				check_da: false,
			}
		},
		onLoad() {
			const app = getApp()
			app.globalData.currentPage = this
			_self = this;
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);

		},
		onShareAppMessage(option) {
			return {
				title: '快来康康同样的TA',
				desc: '这是默认的转发文案，用户可以直接发送，也可以在发布器内修改',
				path: '/page/name_query/name_query', // ?后面的参数会在转发页面打开时传入onLoad方法
				
				templateId: 'xmqi3vul2929i5gn3b',
				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
		},
		created() {
			this.query_name = uni.getStorageSync('query_name')
			this.query_name_show = true
			this.getprovince_data()
		},
		methods: {
			//用户观看完广告
			closeAdFunction() {
				this.getf_data()
			},
			//用户取消广告
			cancelAdFunction() {
				this.gotohome()
			},
			//播放广告
			playad() {
				const app = getApp()
				app.globalData.playAd()
			},
			getprovince_data() {
				this.$u.get('api/sameNameQueryEffectiveArea', ).then(res => {

					this.province_data = res.data
					
				})
			},
			gotohome() {

				uni.switchTab({
					url: '../home/home'
				});
			},

			//获取朋友姓名同名查询数据
			getf_data() {
				this.$u.post('/system/user/profile/query', {
					'name': this.query_name,
					'queryType': 'cmcx',
				}, ).then(res => {
					this.check_da = true
					this.f_bd = true;
					this.getfsameName();
					this.f_series = res.data.Pie.series;
					this.f_Column = res.data.Column;
					console.log(this.f_Column, '住张图')
					this.f_LineA = res.data.LineA;
					var num = this.f_series[0].data + this.f_series[1].data
					console.log(num)
					if (num == 0) {
						this.no_data_show = true
						this.data_show = false
					} else {
						this.no_data_show = false
						this.data_show = true
						this.showPie("f_canvasPie", this.f_series, num)
						this.showColumn("f_canvasColumn", this.f_Column)
						this.showLineA("f_canvasLineA", this.f_LineA)
					}


				})
			},
			//获取帮朋友查询的全国重名数据
			getfsameName() {
				this.fn_data = [],
					this.f_National = 0
			
				for (let i = 0; i < this.province_data.length; i++) {
					console.log(i)
					
					let data = {
						'name': this.query_name,
						'areaName': this.province_data[i],
					}

					this.$u.post('api/sameNameQueryByArea', data).then(res => {
						if (this.fn_data.hasOwnProperty(res.data[0].name) ){
						} else {
							this.fn_data.push(res.data[0])
							
								this.f_National = Number(res.data[0].num) + this.f_National
							
						}


					})

				}

			},
			//生成圆饼图
			showPie(canvasId, series, num) {
				new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: true,
					title: {
						name: num,
						color: '#7cb5ec',
						fontSize: 25,
						offsetY: 0,
					},
					subtitle: {

						color: '#666666',
						fontSize: 15,
						offsetY: 30,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 57,
							labelWidth: 15
						},

					},

					background: '#FFFFFF',
					pixelRatio: 1,
					series: series,
					animation: true,
					width: this.cWidth,
					height: this.cHeight,
					disablePieStroke: true,
					dataLabel: false,
				})
			},
			//生成柱状图
			showColumn(canvasId, chartData) {

				canvaColumn = new uCharts({

					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					dataLabel: true,
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						column: {
							type: 'group',
							width: 15,
						},
					}
				});

			},

			//生成区域图
			showLineA(canvasId, chartData) {
				var canvaArea = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
					},
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						enableMarkLine: true,
						markLine: {
							type: 'solid',


						},
						area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 1
						}
					}
				});

			},


		}
	}
</script>

<style lang="scss">
	.included {
	
		position: relative;
		left: 184rpx;
		top: 26rpx;
		font-size: 36rpx;
	
		font-weight: bold;
		line-height: 50rpx;
		color: #010101;
		-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
		text-stroke: 1 rgba(0, 0, 0, 0);
		opacity: 1;
	
	}
	

	.no—data {


		background: #FFFFFF;

		opacity: 1;


		.no-data-img {

			width: 752rpx;
			height: 817rpx;
		}

		.share {


			width: 100%;
			background: #FFFFFF;

			opacity: 1;

			height: 200rpx;

			.share-btn {
				
				outline: 0;
				color: #FFFFFF;
				margin-top: 12rpx;
				width: 453rpx;
				height: 80rpx;
				background: #98C1FF;
				box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.16);
				opacity: 1;
				border-radius: 38rpx;
			}
		}

	}

	.columns-text {
		margin: auto;
		position: relative;
		bottom: 50rpx;
		width: 120rpx;
		height: 42rpx;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: #010101;
		-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
		text-stroke: 1 rgba(0, 0, 0, 0);
		opacity: 1;

	}

	.dividingLine {
		margin: auto;
		position: relative;
		bottom: 10rpx;
		width: 500rpx;
		height: 1rpx;
		background: #D7D7D7;
		opacity: 1;

	}

	.content {

		width: 722rpx;
		box-shadow: 0rpx 3rpx 6rpx rgba(78, 78, 78, 0.12);
		opacity: 1;
		border-radius: 16rpx;

	}

	.check_data {
		height: 100%;
		margin-left: 15rpx;

		.whole-text {
			margin: auto;
			position: relative;
			top: 20rpx;
			width: 120rpx;
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 42rpx;
			color: #010101;
			-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
			text-stroke: 1 rgba(0, 0, 0, 0);
			opacity: 1;

		}

		.f-charts-box {
			margin-top: 21rpx;
			margin-left: 13rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx rgba(78, 78, 78, 0.12);
			opacity: 1;
			border-radius: 14rpx;

			.bili {

				.bili-man {
					position: relative;
					left: 175rpx;
					font-size: 28rpx;

					font-weight: 400;
					line-height: 40rpx;
					color: #010101;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
				}

				.bili-woman {
					position: relative;
					left: 443rpx;
					top: -40rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
				}
			}



			.proportion-sex-text {
				margin-left: 300rpx;
				margin-top: 42rpx;
				width: 120rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;

			}

			.ageDistribution {
				.age-text {

					font-size: 30rpx;
					margin-left: 40.5%;
					// position: relative;
					// top: 30rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: #010101;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					opacity: 1;

				}
			}


		}

		.whole {
			padding: 50rpx 0 0 0;
			width: 722rpx;

			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx rgba(78, 78, 78, 0.12);
			opacity: 1;
			border-radius: 14rpx;

			.whole-Third-party {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				position: fixed;
				left: 520rpx;
				position: relative;
				bottom: 20rpx;
				color: #919191;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;
			}

			.whole-text {
				margin-top: 40rpx;
				position: relative;
				left: 223rpx;

				font-size: 30rpx;
				font-weight: bold;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;
			}

			.whole-line {
				width: 293rpx;
				position: relative;
				left: 160rpx;
				top: -39rpx;
			}

			.whole-data {
				position: relative;
				left: 79rpx;
				font-size: 26rpx;

				font-weight: bold;
				line-height: 37rpx;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;


			}

		}

	}

	// 下面是饼状图配置信息
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		position: relative;
		top: 50rpx;
		margin-bottom: 50rpx;
		display: flex;

		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}


	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		position: relative;
		margin-left: 38rpx;
		width: 750upx;
		height: 500upx;

	}

	.charts {
		width: 750upx;
		height: 500upx;
	}
</style>
